@import './_vars.scss';

.xdh-map-measure{
  &__tooltips{
    position: relative;
    width:5px;
    height: 5px;
    
    &>div{
      display:inline-block;
      position: absolute;
      width: max-content;
      padding: 0 3px;
      font-size: 12px;
      
      border-radius: 3px;
      
    }
    &.light>div{
      background: $--measure-close-bg-light;
      color: $--measure-close-color-light;
    }
    &.dark>div{
      background: $--measure-close-bg-dark;
      color: $--measure-close-color-dark;
    }
    .help{
      line-height: 24px;
      left: 10px;
      top: -3px;
    }
    .range{
      left: 0;
      transform:translateX(-50%);
      &.length{
        top: -34px;
        line-height: 24px;
      }
      &.area{
        top: -50px;
        line-height: 28px;
        sup{
          line-height: 1;
          font-size: 10px;
        }
      }
    }
  }
  &__content {
    font-size: 13px;
  }
  &__close {
    transform:translateY(1px); 
    font-size: 13px;
  }
  // &__close {
  //   position: relative;
  //   width: 16px;
  //   height: 16px;
  //   line-height: 16px;
  //   border-radius: $--border-radius;
  //   text-align: center;
  //   &.light{
  //     background: $--measure-close-bg-light;
  //     color: $--measure-close-color-light;
  //   }
  //   &.dark{
  //     background: $--measure-close-bg-dark;
  //     color: $--measure-close-color-dark;
  //   }
  // }
  // &__output {
  //   font-size: 12px; 
  //   line-height: 1.2;
  //   span{
  //     white-space:nowrap;
  //     sup{
  //       line-height: 1;
  //       font-size: 8px;
  //     }
  //   }
  // }
}